<template>
  <div>
    <!-- 右下角订单图标状态 -->
    <ul class="order-status-btn-icon">
      <li
        v-for="(orderItem,orderIndex) in orderStatusBtnSvgs"
        v-if="transactionItem.currentUserOperationOrderPermissions && transactionItem.orderStatusCode == orderItem.type  "
        :key="orderIndex"
        @click="transactionItem.currentUserOperationOrderPermissions && orderStatusClick(transactionItem,orderItem)"
      >
        <dgg-tooltip
          :value="showTips"
          :popper-options="popperOptions"
          :content="orderItem.title"
          placement="top"
          class="msg-dot"
          effect="dark"
        >
          <dgg-icon
            :icon-class="orderItem.iconClass"
            svg-width="88px"
            svg-height="88px"
          />
        </dgg-tooltip>
      </li>
    </ul>
    <div>
      <el-dialog
        :visible.sync="backCodeDialog"
        title="退单"
        width="400px"
        @close="backCodeForm.code = ''; backCodeForm.remark = '';deleteFiles(DetailDocumentfileLists)"
      >
        <el-form
          ref="form"
          :model="backCodeForm"
          :rules="rules"
        >
          <el-form-item
            label="退单类型："
            prop="code"
            class="return-order-type"
          >
            <el-select
              v-model="backCodeForm.code"
              placeholder="请选择退单类型"
            >
              <el-option
                v-for="item in backCodeOption"
                :label="item.name"
                :value="item.code"
                :key="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="退单备注："
            class="back-memo"
            prop="remark"
          >
            <el-input
              v-model="backCodeForm.remark"
              :autosize="{ minRows: 4, maxRows: 4}"
              type="textarea"
              show-word-limit
              maxlength="500"
            />
          </el-form-item>
          <el-form-item
            label="附件上传："
            prop="file"
          >
            <el-input
              v-if="false"
              v-model="backCodeForm.file"
            />
            <span
              class="file-add"
              @click="fileType='back';docModal=true"
            >+添加</span>
          </el-form-item>
          <el-form-item>
            <ul>
              <li
                v-for="(fileListItem,fileListIndex) in DetailDocumentfileLists"
                :key="fileListIndex"
              >
                <span class="icon-name">
                  <dgg-icon
                    :icon-class="getIconByType(fileListItem)"
                    svg-width="16px"
                    svg-height="16px"
                  />
                  <span
                    :title="fileListItem.filename?fileListItem.filename:'--'"
                    class="file-name"
                  >{{ fileListItem.filename?fileListItem.filename:'--' }}</span>
                </span>
                <span class="dgg-button-group file-handel">
                  <span
                    v-if="getDocumentType(fileListItem)=='pdf'|| imageTypes.includes(getDocumentType(fileListItem))"
                    @click="viewDocument(fileListItem,getDocumentType(fileListItem))"
                  >查看
                  </span>
                  <span @click="downloadDocument(fileListItem)">下载
                  </span>
                  <span @click="invalidDocument(fileListItem)">删除
                  </span>
                </span>
              </li>
            </ul>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="backCodeDialog = false; backCodeForm.code = ''; backCodeForm.remark = '';deleteFiles(DetailDocumentfileLists)">取 消</el-button>
          <el-button
            type="primary"
            @click="backOrder"
          >确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="caseAuditDialog"
        title="结案"
        width="400px"
        @close="caseAuditForm.code = ''; caseAuditForm.remark = '';deleteFiles(DetailDocumentfileLists)"
      >
        <el-form
          ref="form"
          :model="caseAuditForm"
          :rules="rules"
        >
          <el-form-item
            label="结案类型："
            prop="code"
            class="return-order-type"
          >
            <el-select
              v-model="caseAuditForm.code"
              placeholder="请选择结案类型"
            >
              <el-option
                v-for="item in caseAuditOption"
                :label="item.name"
                :value="item.code"
                :key="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="结案备注："
            class="back-memo"
            prop="remark"
          >
            <el-input
              v-model="caseAuditForm.remark"
              :autosize="{ minRows: 4, maxRows: 4}"
              type="textarea"
              show-word-limit
              maxlength="500"
            />
          </el-form-item>
          <el-form-item
            label="附件上传："
            prop="file"
          >
            <el-input
              v-if="false"
              v-model="caseAuditForm.file"
            />
            <span
              class="file-add"
              @click="fileType='audit';docModal=true"
            >+添加</span>
          </el-form-item>
          <el-form-item>
            <ul>
              <li
                v-for="(fileListItem,fileListIndex) in DetailDocumentfileLists"
                :key="fileListIndex"
              >
                <span class="icon-name">
                  <dgg-icon
                    :icon-class="getIconByType(fileListItem)"
                    svg-width="16px"
                    svg-height="16px"
                  />
                  <span
                    :title="fileListItem.filename?fileListItem.filename:'--'"
                    class="file-name"
                  >{{ fileListItem.filename?fileListItem.filename:'--' }}</span>
                </span>
                <span class="dgg-button-group file-handel">
                  <span
                    v-if="getDocumentType(fileListItem)=='pdf'|| imageTypes.includes(getDocumentType(fileListItem))"
                    @click="viewDocument(fileListItem,getDocumentType(fileListItem))"
                  >查看
                  </span>
                  <span @click="downloadDocument(fileListItem)">下载
                  </span>
                  <span @click="invalidDocument(fileListItem)">删除
                  </span>
                </span>
              </li>
            </ul>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="caseAuditDialog = false; caseAuditForm.code = ''; caseAuditForm.remark= ''; deleteFiles(DetailDocumentfileLists)">取 消</el-button>
          <el-button
            type="primary"
            @click="auditOrder"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 上传附件 -->
      <dgg-modal
        :modal="docModal"
        :hasmodal="true"
        :close-on-click-modal="false"
        :loading="fileLoading"
        affirm-text="确定"
        title="上传文档"
        width="512px"
        class="document-upload-modal"
        @modalAffirm="docModalAffirm"
        @modalQuit="docModal=false"
      >
        <dgg-upload-doc
          v-if="docModal"
          ref="uploadDoc"
          :limit="50"
          :auto-upload="false"
          :data="uploadparams"
          :file-list="fileList"
          :accept-type="acceptType"
          :list-url="listUrl"
          :del-url="deleteUrl"
          :action="uploadUrl"
          class="document-upload-demo"
          :onError="fileLoadError"         
          multiple
        >
          <dgg-button
            type="primary"
            style="width:100px"
            class="receive-button"
          >
            上传文件
          </dgg-button>
        </dgg-upload-doc>
      </dgg-modal>
      <!-- 图片pdf预览 -->
      <div
        v-show="imageView"
        class="img-handle-item"
      >
        <el-image
          ref="imageViewRef"
          :src="imageUrl"
          :preview-src-list="showImgList"
          class="imageViewRef fileimg"
        />
      </div>
    </div>
  </div>

</template>

<script>
// 加载页
// eslint-disable-next-line no-unused-vars
import { mapState, mapActions, mapMutations } from "vuex";
import Notification from "@/componentsEl/notification/index.js";
import config from "@/service/config";
export default {
  name: "OrderStatusIcon",
  components: {},
  props: {
    storeTransactionItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {     
      fileList: [],
      fileLoading: false,
      deleteFile: true,
      transactionItem: {}, // 默认订单传递下来的值
      imageView: false,
      imageUrl: "",
      showImgList: [],
      paramsData: {},
      caseAuditRow: "", // 完结订单
      backOrderRow: "", // 拒接订单
      docModal: false,
      caseAuditOption: [],
      caseAuditDialog: false,
      acceptType: [
        "doc",
        "docx",
        "xls",
        "xlsx",
        "ppt",
        "mp3",
        "wma",
        "wav",
        "pdf",
        "pptx",
        "txt",
        "jpg",
        "jpeg",
        "gif",
        "png",
        "bmp",
        "rar",
        "zip",
        "gz",
        "mp4",
        "wmv",
        "avi",
        "3gp",
        "mkv"
      ],
      docIconList: {
        ".doc.docx": "icon_word",
        ".xls.xlsx": "icon_excel",
        ".ppt.pptx": "icon_ppt",
        ".txt": "icon_txt",
        ".mp3.wma.wav": "icon_music",
        ".mp4.wmv.avi.3gp.mkv": "icon_video",
        ".jpg.jpeg.gif.png.bmp": "icon_pic",
        ".rar.zip.gz": "icon_package",
        ".pdf": "icon_pdf"
      },
      officeTypes: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt"],
      imageTypes: ["jpg", "jpeg", "gif", "png", "bmp"],
      DetailDocumentfileLists: [],
      fileType: "back",
      backCodeOption: [],
      backCodeForm: {
        code: "",
        remark: ""
      },
      caseAuditForm: {
        code: "",
        remark: ""
      },
      rules: {
        remark: [{ required: true, message: "请填写备注", trigger: "blur" }],
        code: [{ required: true, message: "", trigger: "blur" }],
        file: [{ required: true, message: "请上传附件", trigger: "blur" }]
      },
      showTips: false,
      backCodeDialog: false, // 拒接类型弹窗
      popperOptions: {
        boundariesElement: "body"
      },
      time: 0,
      orderStatusBtnSvgs: [
        {
          // 完结待审核
          title: "撤销",
          iconClass: "icon_revoke",
          operationOrderStatus: "cancel_order",
          type: "QDS_SC_ORDER_STATUS_CODE03"
        },
        {
          // 退单待审核
          title: "撤销",
          iconClass: "icon_revoke",
          operationOrderStatus: "reback_order",
          type: "QDS_SC_ORDER_STATUS_CODE02"
        },
        {
          // 已完结
          title: "生成案例",
          iconClass: "icon_generate",
          operationOrderStatus: "over_case_order",
          type: "QDS_SC_ORDER_STATUS_CODE04"
        },
        {
          // 办理中
          title: "退单",
          iconClass: "icon_withdraw123",
          operationOrderStatus: "refuse_order",
          type: "QDS_SC_ORDER_STATUS_CODE01"
        },
        {
          title: "完结",
          iconClass: "icon_over",
          operationOrderStatus: "case_order",
          type: "QDS_SC_ORDER_STATUS_CODE01"
        }
      ]
    };
  },
  computed: {
    uploadUrl() {
      return config.uploadUrl;
    },
    listUrl() {
      return config.listUrl;
    },
    downloadUrl() {
      return config.downloadUrl;
    },
    deleteUrl() {
      return config.deleteUrl;
    },
    uploadparams() {
      return {
        fileId:
          this.fileType === "back"
            ? `FLSC_${this.backOrderRow.scOrderId}`
            : `FLSC_${this.caseAuditRow.scOrderId}`,
        isDeleteOriginalFile: false,
        type: this.fileType === "back" ? "REFUND_APPLY" : "CASE_AUDIT_APPLY"
      };
    }
  },
  watch: {},
  async mounted() {},
  activated() {
    //
  },
  created() {
    this.$nextTick(() => {
      this.transactionItem = this.storeTransactionItem;
    });
  },
  beforeDestroy() {
    //
  },
  methods: {
    ...mapActions(["ruoterJump"]),
    ...mapActions("caseModule", ["case_edit_detail"]),
    ...mapActions("transactionModule", [
      "find_product",
      "get_product_model_by_status",
      "apply_case_audit",
      "apply_back_order_audit",
      "search_files",
      "update_files",
      "delete_files",
      "search_files_cms",
      "undo_case_audit",
      "undo_back_order_audit"
    ]),
    ...mapActions("receiveModule", ["refuse_code_tree_book_list"]),
    ...mapActions("transactionDynamicModule", [
      "get_production_order_details_data" // 获取订单详情
    ]),
    ...mapMutations(["setTransactionItem"]),
    // 订单状态点击
    async orderStatusClick(orderItem, item) {
      let time = new Date().getTime();
      if (time - this.time < 2000) {
        return;
      }
      this.time = time;
      // 已完结订单生成案列
      if (orderItem.orderStatusCode == "QDS_SC_ORDER_STATUS_CODE04") {
        const res = await this.case_edit_detail({
          proId: orderItem.id
        });
        if (res.code === 200) {
          if (res.data.times !== 0) {
            if (Object.keys(res.data).length > 0) {
              this.ruoterJump({
                name: "caseDetailsPreview",
                params: {
                  caseNo: res.data.caseNo,
                  title: res.data.caseName,
                  from: this.$route.name
                }
              });
              return;
            }
          }
          this.$confirm("已生成默认案例，前往查看或修改", "提示", {
            confirmButtonText: "编辑",
            cancelButtonText: "我知道了"
          })
            .then(() => {
              if (Object.keys(res.data).length > 0) {
                this.ruoterJump({
                  name: "caseGenerate",
                  params: {
                    caseNo: res.data.caseNo,
                    title: res.data.caseName,
                    from: this.$route.name
                  }
                });
              }
            })
            .catch(errpr => {
              return;
            });
        }
      }
      // 办理中订单 退单和完结操作
      if (orderItem.orderStatusCode == "QDS_SC_ORDER_STATUS_CODE01") {
        if (item.operationOrderStatus == "refuse_order") {
          // 退单
          this.$confirm(
            "该订单根据您的行为及数据进行匹配，建议不要轻易退单，退单将会影响您的接单排名分数哟~~",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
            .then(res => {
              this.showBackCodeDialog(orderItem);
            })
            .catch(errpr => {});
        } else {
          // 完结
          this.showAuditDialog(orderItem);
        }
      }
      // 退单撤销事件
      if (orderItem.orderStatusCode == "QDS_SC_ORDER_STATUS_CODE02") {
        this.$confirm("确定撤销退单？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(res => {
            this.undo(orderItem);
          })
          .catch(errpr => {
            return;
          });
      }
      // 结案撤销事件
      if (orderItem.orderStatusCode == "QDS_SC_ORDER_STATUS_CODE03") {
        this.$confirm("确定撤销结案？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(res => {
            this.undo(orderItem);
          })
          .catch(errpr => {
            return;
          });
      }
    },
    // 结单
    async auditOrder() {
      if (this.caseAuditForm.code.length === 0) {
        Notification.error("请选择结案原因");
        // this.$message.error("请选择结案原因");
        return;
      }
      if (this.caseAuditForm.remark.trim().length === 0) {
        Notification.error("请填写结案备注");
        // this.$message.error("请填写结案备注");
        return;
      }
      if (this.DetailDocumentfileLists.length === 0) {
        Notification.error("请上传结案附件");
        return;
      }
      const res = await this.apply_case_audit({
        id: this.caseAuditRow.id,
        caseAuditType: this.caseAuditForm.code,
        caseAuditReamrk: this.caseAuditForm.remark
      });
      if (res.code === 200) {
        this.$message.success("操作成功");
        this.searchClick();
        this.caseAuditForm.code = "";
        this.caseAuditForm.remark = "";
        this.deleteFile = false;
        this.caseAuditDialog = false;
        // 刷新订单
        this.toTranstionDetail(this.transactionItem.id);
      }else {
        this.$notify({
          message: res.message,
          type: "error",
          customClass: "dgg-tip-msg"
        });
      }
    },
    // 退单
    async backOrder() {
      if (this.backCodeForm.code.length === 0) {
        Notification.error("请选择退单原因");
        // this.$message.error("请选择退单原因");
        return;
      }
      if (this.backCodeForm.remark.trim().length === 0) {
        Notification.error("请填写退单备注");
        return;
      }
      if (this.DetailDocumentfileLists.length === 0) {
        Notification.error("请上传退单附件");
        return;
      }
      const res = await this.apply_back_order_audit({
        id: this.backOrderRow.id,
        backOrderType: this.backCodeForm.code,
        backOrderRemark: this.backCodeForm.remark
      });
      if (res.code === 200) {
        this.$message.success("操作成功");
        this.searchClick();
        this.backCodeForm.code = "";
        this.backCodeForm.remark = "";
        this.deleteFile = false;
        this.backCodeDialog = false;
        // 刷新订单
        this.toTranstionDetail(this.transactionItem.id);
      }
    },
    async showAuditDialog(params) {
      this.rules.remark = [
        { required: true, message: "请填写结案备注", trigger: "blur" }
      ];
      this.fileType = "audit";
      this.searchFile();
      const res = await this.refuse_code_tree_book_list({
        code: "QDS_FLSC_CASE",
        type: 1,
        level: 1
      });
      if (res.code === 200) {
        this.caseAuditOption = res.data;
        this.caseAuditDialog = true;
        this.caseAuditRow = params;
      }
    },
    async showBackCodeDialog(params) {
      this.rules.remark = [
        { required: true, message: "请填写退单备注", trigger: "blur" }
      ];
      this.fileType = "back";
      const res = await this.refuse_code_tree_book_list({
        code: "QDS_REFUND_REASON",
        type: 1,
        level: 1
      });
      if (res.code === 200) {
        this.backCodeOption = res.data;
        this.searchFile();
      }
      this.backCodeDialog = true;
      this.backOrderRow = params;
    },
    // 撤销
    async undo(row) {
      if (row.orderStatusCode === "QDS_SC_ORDER_STATUS_CODE03") {
        const res = await this.undo_case_audit({ id: row.id });
        if (res.code === 200) {
          this.$notify({
            title: "提示",
            message: `已撤销结案，前往办理中订单查看`,
            type: "success",
            customClass: "dgg-tip-msg"
          });
          // 刷新订单
          this.toTranstionDetail(this.transactionItem.id);
          // this.get_product_model_by_status(this.productParams);
          this.searchClick();
        }
        // qdsflsc/api/portal/order/v1/undo_case_audit.do
      } else {
        const res = await this.undo_back_order_audit({ id: row.id });
        if (res.code === 200) {
          this.$notify({
            title: "提示",
            message: `已撤销退单，前往办理中订单查看`,
            type: "success",
            customClass: "dgg-tip-msg"
          });
          // 刷新订单
          this.toTranstionDetail(this.transactionItem.id);
          // this.get_product_model_by_status(this.productParams);
          this.searchClick();
        }
        // QDS_SC_ORDER_STATUS_CODE02
        // qdsflsc/api/portal/order/v1/undo_back_order_audit.do
      }
    },
    // 根据文件类型返回icon
    getIconByType(item) {
      const type =
        item.filename &&
        item.filename.substr(item.filename.lastIndexOf(".") + 1);
      const typeItem = Object.keys(this.docIconList).find(
        ty => ty.indexOf(type) > -1
      );
      return this.docIconList[typeItem] || "icon_others";
    },
    // 查看文档
    viewDocument(item, type) {
      // 图片预览
      if (this.imageTypes.includes(type)) {
        this.imageUrl = "";
        this.imageView = true;
        this.imageUrl = item.filepath;
        this.showImgList = [this.imageUrl];
        this.$forceUpdate();
        this.$refs.imageViewRef.clickHandler();
      } else {
        // 其他文件查看
        const fileName = encodeURI(encodeURI(item.filename));
        window.open(item.filepath + "?title=" + fileName);
      }
    },
    // 获取文件类型
    getDocumentType(item) {
      const type =
        item.filename &&
        item.filename.substr(item.filename.lastIndexOf(".") + 1);
      return type;
    },
    async searchFile(type) {
      await this.$nextTick();
      // 请求附件列表
      const id =
        this.uploadparams.fileId +
        (this.fileType === "back" ? "_REFUND_APPLY" : "_CASE_AUDIT_APPLY");
      const res = await this.search_files({ fileId: id });
      if (type === "back") {
        // 退单附件列表
        if (res.code === 200 && res.data.length > 0) {
          this.DetailDocumentfileLists = res.data;
        } else {
          this.DetailDocumentfileLists = [];
        }
      } else {
        // 结案附件列表
        if (res.code === 200 && res.data.length > 0) {
          this.DetailDocumentfileLists = res.data;
        } else {
          this.DetailDocumentfileLists = [];
        }
      }
    },
    // 下载文档
    downloadDocument(item) {
      const fileName = encodeURI(encodeURI(item.filename));
      const url =
        this.downloadUrl +
        "?fileUrl=" +
        item.filepath +
        "&fileName=" +
        fileName;
      window.open(url, "_blank");
    },
    // 删除文档
    deleteFiles(item) {
      if (Array.isArray(item) && item.length > 0 && this.deleteFile) {
        item.forEach(it => {
          this.delete_files({
            fileId: it.fileid,
            fileName: it.filename,
            form: 1
          }).then(res => {});
        });
      }
      this.deleteFile = true;
    },
    invalidDocument(item) {
      this.$confirm("确认要删除该文件？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.delete_files({
            fileId: item.fileid,
            fileName: item.filename,
            form: 1
          }).then(res => {
            if (res.code === 200) {
              this.$notify({
                title: "提示",
                message: "操作成功",
                type: "success",
                customClass: "dgg-tip-msg"
              });
              this.searchFile();
            }
          });
        })
        .catch(() => {
          //
        });
    },
    // 刷新订单数据
    toTranstionDetail(orderid) {
      if (orderid) {
        this.get_production_order_details_data({
          id: orderid
        }).then(res => {
          if (res.code == 200) {
            this.$nextTick(() => {
              this.setTransactionItem(res.data);
              this.transactionItem = res.data;
              console.log(
                JSON.parse(JSON.stringify(this.transactionItem)),
                "asdfsadf"
              );
            });
          }
        });
      }
    },
    searchClick() {
      this.paramsData = {
        customerOrScOrderNoOrContractNo: this.searchData
      };
    },
     fileLoadError() {   
      this.fileLoading = false;     
    },
    async docModalAffirm() {
      this.fileLoading = true;     
      await this.$refs["uploadDoc"].$refs["upload-inner"].manualUpload(() => {
        this.docModal = false;
          this.fileLoading = false;        
        this.searchFile();        
      });
    },

  }
};
</script>

<style lang="less" scoped >
@import "~@/assets/less/main.less"; //引入全局less文件
.order-status-btn-icon {
  /* position: absolute;
  width: 90px;
  position: absolute;
  bottom: 140px;
  right: -90px; */
  position: fixed;
  width: 90px;
  bottom: calc(50% - 14px);
  right: calc(50% - 45px);
  transform: translate(635px, 50%);
  & > li {
    height: 88px;
    overflow: hidden;
    cursor: pointer;
    font-size: 0;
  }
}
.imageViewRef {
  z-index: 2100;
  width: 0;
  height: 0;
}

// 弹窗文件
/deep/ .el-form {
  .el-form-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    /*text-align: center;*/
    padding-left: 45px;
    .el-form-item__label {
      float: none;
      line-height: 30px;
      vertical-align: top;
    }
    .el-form-item__content {
      float: none;
      display: inline-block;
    }
    &.return-order-type {
      /deep/.el-select {
        width: 175px;
      }
    }
    .el-textarea {
      width: 175px;
    }
  }
}
.back-memo {
  /deep/ .el-textarea .el-input__count {
    line-height: 1;
  }
}
.file-name {
  display: inline-block;
  max-width: 190px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.4;
  vertical-align: middle;
}
.file-handel {
  color: var(--main-primary-color);
  cursor: pointer;
}
//附件显示
.show-detail-filesList {
  padding-left: 60px;
  padding-right: 30px;
  ul {
    width: 100%;
    li {
      overflow: hidden;
      line-height: 26px !important;
      box-sizing: border-box;
      margin-bottom: 14px;

      .icon-name {
        display: flex;
        align-items: center;
        /deep/.dgg-icon {
          vertical-align: middle;
        }
        p {
          margin-left: 14px;
          .dgg-text-ellip;
          max-width: 180px;
        }
      }
      display: flex;
      align-items: center;
      justify-content: space-between;
      /deep/.dgg-button-group {
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-end;
        flex: 1;
        overflow: hidden;
        text-align: right;
        display: none;
        /deep/.dgg-button {
          line-height: 26px;
          padding: 0 12px;
          border: 0;
          border-radius: 4px;
          margin-left: 4px;
          &:hover {
            background-color: #e7f7f7;
          }
        }
      }

      &:hover {
        .icon-name {
          .dgg-icon {
            color: #10bbb8;
          }
          p {
            color: #10bbb8;
          }
        }
        /deep/.dgg-button-group {
          display: flex;
        }
      }
    }
  }
}

//图片预览
/deep/ .el-image {
  &.fileimg {
    z-index: 5000;
    .el-image-viewer__wrapper {
      z-index: 6000;
      .el-image-viewer__close {
        background-color: #fff;
        z-index: 7000;
      }
    }
  }
}
</style>
